import React, { Component } from "react";
import Form from "./Form";
import List from "./List";

class App extends Component {
  state = {
    list: [
      {
        id: 1,
        name: "zhangsan",
      },
      {
        id: 2,
        name: "lisi",
      },
    ],
  };

  add = (item) => {
    // console.log(item);
    // 接收到子组件传来的对象，需要追加到list里面
    this.setState((prevState) => {
      return {
        list: [...prevState.list, item],
      };
    });
  };

  remove = (id) => () => {
    // console.log(id);
    this.setState((prevState) => {
      return {
        list: prevState.list.filter((item) => item.id !== id),
      };
    });
  };

  render() {
    return (
      <>
        <h2>todolist</h2>
        {/* 子传父，用于接受子组件传过来的数据 */}
        <Form onGetItem={this.add} />
        {/* 父传子，将list数组传递给子组件 */}
        <List list={this.state.list} onRemove={this.remove} />
      </>
    );
  }
}

export default App;
